<template>
	<view class="content">
		<uni-nav-bar shadow left-icon="left" :rightText="rightText" statusBar="true" title="订单详情"
			@clickRight="placeorder" @clickLeft="back" />
		<view class="item">
			<view class="code">
				<text>采购单号 {{info.sn_code}}</text>
			</view>
			<view class="list">
				<text class="name">创建时间</text>
				<text>{{info.creation_time}}</text>
			</view>
			<view class="list">
				<text class="name">项目名称</text>
				<text> {{enquiry.project_name}}</text>
			</view>
			<view class="list">
				<text class="name">询价截止时间</text>
				<text>{{enquiry.quotation_exp_date}}</text>
			</view>
			<view class="list">
				<text class="name">期望交货时间</text>
				<text>{{enquiry.delivery_time}}</text>
			</view>
			<view class="list">
				<text class="name">联系人</text>
				<text>{{enquiry.consignee}}</text>
			</view>
			<view class="list">
				<text class="name">联系电话</text>
				<text>{{enquiry.consignee_phone}}</text>
			</view>
		</view>
		<view class="item">
			<view class="code iconbox">
				货物信息<view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="goodslist">
				<text class="name">商品名称</text>
				<text class="name">商品数量</text>
				<text class="name">单位</text>
				<text class="name">商品单价</text>
			</view>
			<view class="goodslist" v-for="(item,index) in info.goods" :key="index">
				<text class="name">{{item.goods_name}}</text>
				<text class="name">{{(item.goods_num*1).toFixed(4)}}</text>
				<text class="name">{{item.sku_name}}</text>
				<text class="name">{{item.goods_price}}</text>
			</view>
		</view>

		<!-- <view class="imgbox" v-if="info.status>=4">
			<view class="title">
				<text>合同信息</text>
				<view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="file">
				<view class="name" @tap="openFile">{{fileUrl}}</view>
			</view>
		</view> -->
	</view>
</template>

<script setup>
	import uploadUrl from '../../network/utils.js';
	import {
		getOrderInfo
	} from '../../network/order.js';
	import {
		onShow,
		onLoad,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	const placeorder = () => {
		if (info.status == 3||info.status==1||info.status==4) {
			return
		}
		uni.navigateTo({
			url: './placeOrder?id=' + info.id
		})
	}
	onLoad((res) => {
		getDetail(res.id)
	})
	const info = reactive({})
	const enquiry = reactive({})
	const rightText = ref('下单')
	const getDetail = (id) => {
		let data = {
			order_id: id
		}
		getOrderInfo(data).then(res => {
			Object.assign(info, res.data.data)
			Object.assign(enquiry, res.data.data.enquiry)
			if (info.status == 3||info.status==1||info.status==4) {
				rightText.value = ''
			}
		})
	}
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	const fileUrl = ref('')
	const openFile = () => {
		// #ifdef  APP-PLUS
		plus.runtime.openURL(fileUrl.value, function(res) {});
		// #endif

		//#ifndef  APP-PLUS		
		window.open(fileUrl.value)
		//#endif
	}
</script>

<style lang="scss">
	.item {
		margin: 20rpx 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		.code {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;

			.status {
				font-size: 28rpx;
			}
		}

		.iconbox {
			justify-content: flex-start;
			gap: 10rpx;

			.icon {
				font-size: 40rpx;
				color: #ff6700;
			}
		}

		.list {
			width: 100%;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333;

			.name {
				display: inline-block;
				width: 180rpx;
				text-align: right;
				margin-right: 30rpx;
			}
		}

		.goodslist {
			width: 100%;
			margin-top: 20rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #333;
			display: flex;
			justify-content: space-between;

			.name {
				width: 180rpx;
				text-align: right;
				text-align: center;
			}
		}
	}

	.imgbox {
		margin: 20rpx 0rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.upload {
			width: 220rpx;
			height: 220rpx;
			border: 2rpx solid #f7f7f7;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.file {
			width: 100%;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			margin-top: 30rpx;

			.name {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #ffc400;
			}

			.del {
				color: #ff6700;
			}
		}

		.title {
			margin-bottom: 30rpx;
			font-size: 32rpx;
			display: flex;
			justify-content: flex-start;
			gap: 10rpx;
			font-weight: bold;

			.icon {
				font-size: 40rpx;
				color: #ff6700;
				font-weight: normal;
			}
		}
	}
</style>